<template>
  <div id="wrindex">
    <my-header></my-header>
    <div
      style="
        background-color: #cccccc;
        height: 390px;
        display: flex;
        justify-content: center;
        margin-top: 0px;
        background-image: url(https://qnm.hunliji.com/o_1eea2f80414u2u6l2fnlc9a819.jpg?imageView1/1/w/2560/h/460);
      "
    >
      <div style="display: flex" class="btn1_box" @input="search">
        <input
          type="text"
          name=""
          id="input"
          value=""
          placeholder="请输入您查询的内容"
          style="outline: none"
          v-model="sousuo"
        /><router-link :to="`/details?iname=${iname}`" class="a1" style="color: #f5f5f5">搜 索</router-link>
      </div>
    </div>
    <div style="width: 1200px; margin: 0 auto">
      <div class="title1">
        <h3 style="font-size: 32px; font-weight: normal">热门旅拍城市</h3>
      </div>
      <div style="display: flex">
        <router-link
          :to="`/hotcity?rid=${item.rid}`"
          v-for="(item, i) in arr"
          :key="i"
        >
          <div class="citydiv">
            <img class="img1" :src="item.cimg" />
            <div class="cityname">
              <span class="cityname_s">{{ item.city }}</span>
              <p>{{ item.jianjie }}</p>
              <p>拍照{{ item.mth }}</p>
            </div>
          </div>
        </router-link>
      </div>
    </div>
    <div style="width: 1200px; margin: 0 auto; display: block">
      <div class="title2">
        <h3 style="font-size: 32px; font-weight: normal">精选套餐推荐</h3>
        <p style="margin-top: 10px">婚庆价目表，婚庆套餐报价看这里</p>
      </div>
      <div class="show1 container">
        <span @mouseenter="showBest(i)" v-for="(item, i) in arr2" :key="i">
          <router-link to="/details" :class="{ best: active == i }">
            {{ item.iname }}
          </router-link>
        </span>
      </div>
      <div
        style="display: flex"
        v-for="(item, index) in inImg"
        :key="index"
        v-show="active == index"
      >
        <router-link
          :to="`/in_shop?tid=${inShop.mid}`"
          v-for="(inShop, i) in item"
          :key="i"
        >
          <div class="shop">
            <div>
              <img class="img2" :src="inShop.img" />
            </div>
            <div class="hover_1">
              <p>{{ inShop.title }}</p>
              <p>{{ inShop.diqu }}</p>
              <h5>¥{{ inShop.price }}</h5>
            </div>
          </div>
        </router-link>
      </div>
    </div>
    <div
      style="
        width: 1200px;
        margin: 0 auto;
        display: block;
        padding-bottom: 50px;
      "
    >
      <div class="title2">
        <h3 style="font-size: 32px; font-weight: normal">婚庆商家推荐</h3>
        <p style="margin-top: 10px">新人都喜欢找这些婚庆公司策划婚礼</p>
      </div>
      <div class="show1 container">
        <span @mouseenter="showBest1(i)" v-for="(item, i) in outname" :key="i">
          <router-link to="/details" :class="{ best1: active1 == i }">
            {{ item.outname }}
          </router-link>
        </span>
      </div>
      <div
        style="display: flex"
        v-for="(out, i) in outImg"
        :key="i"
        v-show="active1 == i"
      >
        <router-link
          :to="`/out_shop?sid=${outShop.oid}`"
          v-for="(outShop, i) in out"
          :key="i"
        >
          <div class="shop">
            <img class="img2" :src="outShop.outimg" />
            <div class="hover_1">
              <p class="shop_p">{{ outShop.outtitle }}</p>
              <h5 style="color: #dc3545; font-size: 20px">
                ¥{{ outShop.outprice }}
              </h5>
            </div>
          </div>
        </router-link>
      </div>
    </div>
    <my-footer></my-footer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active1: 0,
      active: 0,
      arr: [{ city: [] }, { cimg: [] }],
      arr2: [],
      arr3: [],
      arr4: [],
      arr5: [],
      sorts: 0,
      inImg: [],
      outImg: [],
      outname: [],
      mid: [],
      sousuo:"",
      iname:""
    };
  },
  mounted() {
    this.axios.get("/show").then((result) => {
      this.arr = result.data;
      // console.log(this.arr);
    });

    this.axios.get("/in_shop_iname").then((result1) => {
      this.axios.get("/in_shop_img").then((result2) => {
        this.arr2 = result1.data;
        this.arr5 = result2.data;
        var i = 0;
        this.arr2.forEach((item) => {
          //        console.log(item,item.iname);
          var arr = [];
          var m = 0;
          this.arr5.forEach((items) => {
            if (items.iname == item.iname && m < 4) {
              items.img = "./img/wangrui/" + items.img;
              // console.log(items.img)
              arr.push(items);
              m++;
              // console.log(arr)
            }
          });
          this.inImg[i] = arr;
          i++;
          //  console.log(this.inImg)
        });
      });
    });

    this.axios.get("/out_shop_outname").then((res1) => {
      this.axios.get("/out_shop_outimg").then((res2) => {
        this.outname = res1.data;
        var arr2 = res2.data;
        var i = 0;
        this.outname.forEach((item) => {
          var arr3 = [];
          var m = 0;
          arr2.forEach((items) => {
            if (items.outname == item.outname && m < 4) {
              items.outimg = "./img/wangrui/" + items.outimg;
              arr3.push(items);
              m++;
            }
          });
          this.outImg[i] = arr3;
          i++;
        });
      });
    });
  },
  methods: {
    showBest(i) {
      this.active = i;
    },
    showBest1(i) {
      this.active1 = i;
    },
    search(){
      this.iname=this.sousuo
      console.log(this.iname)
    }
  },
};
</script>
<style scoped>
#wrindex {
  min-width: 100%;
  margin: 0 auto;
}
img:hover {
  opacity: 0.8;
}
#input {
  width: 500px;
  height: 50px;
  /* margin-top: 230px; */
  border: 0px;
  border-radius: 3px 0 0 3px;
  padding-left: 10px;
}

.a1 {
  /* margin-top: 230px; */
  width: 110px;
  height: 50px;
  background-color: #f83244;
  text-decoration: none;
  text-align: center;
  line-height: 50px;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
}

.show1 a {
  text-decoration: none;
  font-size: 16px;
  margin-right: 75px;
}

.show1 a.best {
  color: red;
  font-weight: bold;
}

.show1 a.best1 {
  color: red;
  font-weight: bold;
}

.btn1_box {
  margin-top: 290px;
  height: 90px;
  border: 20px solid #666666;
  border-radius: 3px;
}

.title1 {
  margin-top: 50px;
  margin-bottom: 50px;
  text-align: center;
}

.title2 {
  margin-top: 50px;
  margin-bottom: 50px;
  text-align: center;
}

.img1 {
  width: 238px;
  height: 179px;
}

.img2 {
  width: 285px;
  height: 178px;
}

.citydiv {
  float: left;
  margin: 1px;
  position: relative;
  height: 180px;
  /* display: inline-block; */
}

.show1 {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background-color: #fafafa;
  padding-left: 50px;
  box-sizing: border-box;
}

.shop {
  float: left;
  margin: 5px;
  position: relative;
}

.shop_p {
  font-size: 17px;
  font-weight: bold;
  margin-top: 15px;
  margin-bottom: 10px;
}

.cityname {
  position: relative;
  top: -56px;
  left: 0;
  padding: 16px 20px 0;
  height: 52px;
  background: rgba(0, 0, 0, 0.64);
  transition: 0.2s all ease;
  border-radius: 2px;
  overflow: hidden;
}

.cityname > p {
  color: #fafafa;
  padding-top: 30px;
}

.cityname_s {
  margin-left: 10px;
  color: #fff;
  font-size: 20px;
  line-height: 20px;
}

.cityname:hover {
  top: -183px;
  height: 179px;
}

.hover_1 {
  position: relative;
  margin: -20px auto 0;
  padding: 10px 20px 0;
  width: 240px;
  height: 91px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
  line-height: 25px;
  transition-duration: 0.5s;
}

.hover_1 > p:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  color: #333;
}
.hover_1 > p:nth-child(2) {
  font-size: 12px;
  color: #666666;
}
.hover_1 > h5 {
  font-size: 18px;
  color: #dc3545;
}
.hover_1:hover {
  transform: translateY(-8px);
}
</style>